<template>
	<view class="fill-width-height pagecontent flex-col" :class="$thatThemeClassName">
		<view class="search flex-col">
			<view class="search fill-width">
				<uv-search placeholder="请输入搜索内容" v-model="keyword" @search="search" bgColor="white">
				</uv-search>
			</view>
			<TypeMenu v-if="typeList.length > 0" :typeList="typeList" v-model="typeId" @itemClick="search()"/>
		</view>
		<scroll-view 
			v-if="tableDataList.length > 0" 
			class="flex-1 overflow-hidden"
			scroll-y 
			lower-threshold="20" 
			@scrolltolower="handleScroll"
		>
			<uv-cell-group class="cell-group_contant" ref="scrollContainer" >
				<uv-grid :col="colNum" class="fill-width" style="min-height: 20vw;">
					<uv-grid-item 
						v-for="(item,index) in tableDataList" 
						:key="index"
						:customStyle="{ padding: '6px' }"
						@click="viewsDetails(item)"
					 >
						<view class="fill-width imgItemView" style="min-height: 20vw;">
							<uv-image
								:mode="'aspectFit'"
								radius="10"
								width="100%"
								:height="imageHeight"
								:lazy-load="true"
								:observeLazyLoad="true"
								:fade="true"
								:duration="450"
								:showMenuByLongpress="false"
								:src="viewFile(item)"
							>
								<template v-slot:loading>
									<uv-loading-icon color="#999"></uv-loading-icon>
								</template>
							</uv-image>
						</view>
					</uv-grid-item>
				</uv-grid>
				<uv-load-more 
					:status="status" 
					:loading-text="'努力加载中'"
					:loadmore-text="'轻轻上拉'"
					:nomore-text="'实在没有了'"
				/>
			</uv-cell-group>
		</scroll-view>
		<view class="flex-1" v-else>
			<uv-empty 
				mode="search"
				con="https://cdn.uviewui.com/uview/empty/car.png"
			></uv-empty>
		</view>
	</view>
</template>

<script>
	import {search,getTypeList} from '@/api/list/search'
	import { listToTree } from '@/framework/utils'
	import { useCommonStore } from '@/store/common'
	import TypeMenu from  '@/components/typeMenu'
	const commonStore = useCommonStore()
	import sharePages from '@/framework/plugins/sharePages'
	import { clearImageListCache,setImageListCache } from '@/hooks/common'
	export default {
		mixins: [sharePages],
		components: {
			TypeMenu
		},
		data() {
			return {
				status: 'loadmore',
				keyword: '',
				typeId: 'all',
				childrenList: null,
				childrenId: '',
				allObj: { id:'all', name: '全部' },
				typeList: [],
				tableDataList: [],
				total: 0,
				queryParams: {
					pageNum: 1,
					pageSize: 30,
				},
			}
		},
		computed: {
			totalPages(){
				return Math.ceil(this.total / (this.queryParams.pageSize || 10)); 
			},
			colNum(){
				return this.$config.searchViewImgColNum || 4
			},
			imageMode(){
				return this.$config.imgageMode || 'widthFix'
			},
			imageHeight(){
				if(this.$config?.pageGridListImgageHeight?.length > 0){
					return this.$config.pageGridListImgageHeight
				}
				if(this.$config.isCartoon){
					return 120;
				}
				return 240
			},
		},
		methods: {
			search() {
				this.tableDataList = []
				this.queryParams.pageNum = 1
				this.getTablePage()
			},
			goToPage(url) {
				uni.navigateTo({
					url: url 
				});
			},
			viewsDetails(item) {
				clearImageListCache()
				let imageList = this.tableDataList.map(item => item?.fileid?.length > 0 ? item.fileid : item.id)
				setImageListCache(imageList)
				const id = item?.fileid?.length > 0 ? item.fileid : item.id
				const encodedId = encodeURIComponent(id);
				this.goToPage('/pages/viewdetail/index?fileId=' + encodedId )
			},
			viewFile(item){
				if(item?.fileid?.length > 0){
					return item?.fileid
				}
				return this.$getPreviewPath(item.id)
			},
			async getTypeList() {
				const typeList = await getTypeList({bustype: 'imgType'}).then((res) => res.data)
				typeList.unshift(this.allObj)
				typeList.forEach((item) => {
					item.label = item.name
					item.value = item.id
				})
				const treeList = listToTree(typeList, 'id', 'parentid')
				treeList?.forEach((item) => {
					if (item?.children?.length === 0) {
						delete item.children
					}
				})
				this.typeList = treeList
			},
			handleScroll(event) {
				const isFlag = this.status !== 'nomore' && this.queryParams.pageNum <= this.totalPages
				if (isFlag) {
					this.queryParams.pageNum++;
					this.getTablePage();
				}
			},
			async getTablePage() {
				// this.tableDataList = []
				this.total = 0
				let typeId = this.typeId 
				if(this.childrenId?.length > 0){
					typeId = typeId + ',' + this.childrenId
				}
				const queryParams = Object.assign(this.queryParams, {
					typeId: typeId,
					searchValue: this.keyword
				})
				this.status = 'loading'
				const that = this
				search(queryParams).then(async res => {
					const businids = res?.rows?.map(item => item.id)?.join(',')
					// const urlList = await that.$getFileViewUrlByBussIds({bussids: businids}).then(urlRes => urlRes.data)
					// if(urlList?.length !== 0 && urlList?.length === res.rows?.length){
					// 	res.rows?.forEach((item,index) => item.httpURL = urlList[index] )
					// }
					this.tableDataList.push(...res.rows)
					this.total = res.total
					if(this.queryParams.pageNum <= this.totalPages){
						this.status = 'loadmore'
					} else {
						this.status = 'nomore'
					}
				})
			},
			clickItem(item) {
				this.tableDataList = []
				this.typeId = item.id
				this.childrenId = ''
				this.childrenList = item?.children || []
				this.childrenList?.forEach((mitem, index) => {
					mitem.checked = false
				})
				this.getTablePage()
			},
			radioClick(item) {
				this.tableDataList = []
				this.childrenList.forEach((mitem, index) => {
					mitem.checked = false
				})
				item.checked = true
				this.childrenId = item.id
				this.search()
			}
		},
		mounted(){
			clearImageListCache()
		},
		async onLoad(params) {
			await this.getTypeList()
			this.keyword = commonStore?.$state?.keyword?.keyword || ''
			this.search()
			
			this.$bus.$on('searchKeyWord',(keyword) => {
				this.keyword = keyword
				this.search()
			})
			
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		:deep(.uv-search__action--active) {
			padding: 6px;
			border-radius: 5px;
			background: #377ff5;
			color: white;
			margin: 0;
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}
		:deep(.uv-search){
			padding: 10px;
		}
		:deep(.uv-search__content) {
			margin: 0;
		}
		:deep(.uv-search__action.uv-search__action--active){
			display: none;
		}
	}
	.cur_grid_item{
		// > uni-view {
		// 	height: 100% !important;
		// }
		// :deep(.uv-image){
		// 	height: 100% !important;
		// }
	}
	

	.uv-page__tag-item {
		margin-right: 8px;
		cursor: pointer;
	}

	.tags_item {
		:deep(.uv-tags) {
			border: none;
		}

		:deep(.uv-tags__text) {
			color: #606266;
		}
	}
	.cell-group_contant{
		height: 100%;
		:deep(.uv-cell-group__wrapper,.uv-grid) {
			height: 100%;
		}
	}
</style>